<template>
  <a-modal
    :title="`商品${model ? '编辑' : '新增'}`"
    :width="1200"
    :visible="visible"
    :centered="true"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-row>
          <a-col :span="8">
            <a-form-item label="名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['name']" placeholder="请填写名称" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="类型" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['goods_kinds_id']" placeholder="请选择类型">
                <a-select-option :value="item.id" v-for="item in goodsKinds" :key="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="价格" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input-number v-decorator="['price']" placeholder="请填写价格" :step="0.1" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="会员价格" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input-number v-decorator="['vip_price']" placeholder="请填写会员价格" :step="0.1" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="颜色尺寸" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['color_size']" placeholder="请填写颜色尺寸" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否包邮" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['is_express']" placeholder="请选择是否包邮">
                <a-select-option :value="0">否</a-select-option>
                <a-select-option :value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="快递价格" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input-number v-decorator="['express_price']" placeholder="请填写快递价格" :step="0.1" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否使用积分兑换" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['is_integral']" placeholder="请选择是否积分兑换">
                <a-select-option :value="0">否</a-select-option>
                <a-select-option :value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否自营" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['is_self']" placeholder="请选择是否自营">
                <a-select-option :value="0">否</a-select-option>
                <a-select-option :value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否推荐" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['is_recommend']" placeholder="请选择是否推荐">
                <a-select-option :value="0">否</a-select-option>
                <a-select-option :value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否上架" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['status']" placeholder="请选择是否上架">
                <a-select-option :value="0">否</a-select-option>
                <a-select-option :value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否参加活动" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['is_activity']" placeholder="请选择是否参加活动">
                <a-select-option :value="0">否</a-select-option>
                <a-select-option :value="1">是</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
		  <a-col :span="8">
		    <a-form-item label="商品库存" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
		      <a-input type='number' v-decorator="['stock']" placeholder="请填写库存" />
		    </a-form-item>
		  </a-col>
		  <a-col :span="8">
		    <a-form-item label="销量" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
		      <a-input type='number' v-decorator="['sales_num']" placeholder="请填写销量" />
		    </a-form-item>
		  </a-col>
          <a-col :span="24">
            <a-form-item label="商品介绍" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
              <a-textarea v-decorator="['content']" placeholder="请填写商品介绍" :auto-size="{ minRows: 3 }" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="主图" style="margin-bottom:0" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
              <d-upload
                v-decorator="[
                  'img_url',
                  {
                    initialValue: ''
                  }
                ]"
              >
              </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="轮播图" style="margin-bottom:0" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
              <d-upload
                v-decorator="[
                  'carousel_img',
                  {
                    initialValue: []
                  }
                ]"
                :multiple="true"
              >
              </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <!-- :isVideo='false' -->
            <a-form-item label="商品视频" style="margin-bottom:0" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
              <d-upload
                v-decorator="[
                  'videos',
                ]"
                :isVideo='true'
                :multiple="false"
              >
              </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="内容图" style="margin-bottom:0" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
              <d-upload
                v-decorator="[ 
                  'content_img',
                  {
                    initialValue: []
                  }
                ]"
                :multiple="true"
              >
              </d-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { goodsKinds, goodsEdit, goodsAdd } from '@/api/goods'
import formModalMixin from '@/mixins/formModalMixin'
import storage from 'store'
import { imgUploadUrl } from '@/api/upload'
import { ACCESS_TOKEN } from '@/store/mutation-types'
// 表单字段
const fields = [
  'name',
  'id',
  'img_url',
  'goods_kinds_id',
  'carousel_img',
  'img_url',
  'stock',
  'sales_num',
  'content',
  'is_activity',
  'is_recommend',
  'status',
  'is_self',
  'color_size',
  'is_integral',
  'express_price',
  'price',
  'videos',
  'content_img',
  'is_express',
  'vip_price'
]

export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.editAction = goodsEdit
    this.addAction = goodsAdd
    return {
      imgUploadUrl,
      headers: {
        token: storage.get(ACCESS_TOKEN)
      },
      goodsKinds: [],
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 21 }
        }
      }
    }
  },
  created () {
    goodsKinds().then(res => {
      this.goodsKinds = res.data.kinds
    })
  }
}
</script>
